<div #mapViewNode class="esri-view">
  <div class="legend-box">
    <div class="legend-control">
      <i class="ag_remove" [title]="l('pick_up')" [hidden]="!legendShow" (click)="legendShow = !legendShow"></i>
      <i class="ag_web_asset" [title]="l('online_supervise')" [hidden]="legendShow" (click)="legendShow = !legendShow"></i>
    </div>
    <form nz-form class="ant-advanced-search-form" [hidden]="!legendShow" >
      <div nz-row [nzGutter]="24">
        <div nz-col nzXl="24" nzXXl="24">
          <nz-form-item nzFlex *ngIf='!currentUser.siteId'>
            <nz-form-label>{{l('site_name')}}</nz-form-label>
            <nz-form-control>
              <nz-select name="siteId" [(ngModel)]="siteId" (ngModelChange)="changeSelect()"
                         [ngModelOptions]="{standalone: true}"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option [nzValue]="''" [nzLabel]="l('all')"></nz-option>
                <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName" [title]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item nzFlex>
            <nz-form-label>{{l('lockset_no')}}</nz-form-label>
            <nz-form-control>
              <nz-select name="siteId" [(ngModel)]="lockNo"  (ngModelChange)="selectLock()"
                         [ngModelOptions]="{standalone: true}"
                         [nzPlaceHolder]="l('please_select_site')">
                <nz-option [nzValue]="''" [nzLabel]="l('all')"></nz-option>
                <nz-option *ngFor="let option of onlinePonits" [nzValue]="option.lockNo" [nzLabel]="option.lockNo"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </div>
</div>
